<template>
	<view class="mid-tab">
		<view class="item color1">
			<text class="title">已预约</text>
			<view class="bottom">
				<text class="number">12</text>
				<text class="dan">台</text>
			</view>
			<icon class="ic-yiyuyue iconfont bs-yiyuyue" type=""></icon>
		</view>
		<view class="item color2">
			<text class="title">使用中</text>
			<view class="bottom">
				<text class="number">8</text>
				<text class="dan">台</text>
			</view>
			<icon class="ic-jinxingzhong iconfont bs-jinhangzhong" type=""></icon>
		</view>
		<view class="item color3">
			<text class="title">已结束</text>
			<view class="bottom">
				<text class="number">69</text>
				<text class="dan">台</text>
			</view>
			<icon class="ic-yijieshu iconfont bs-yijieshu" type=""></icon>
		</view>
	</view>
</template>

<script lang="ts" setup>
</script>

<style lang="scss" scoped>
@import "/static/css/iconfont.css";

@keyframes fadeIn {
	from {
		opacity: 0;
		transform: translateY(20px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.mid-tab {
	transform: translateY(-35%);
	display: flex;
	justify-content: space-between;
	width: 92%;
	height: 50px;
	border-radius: 5px;
	animation: fadeIn 0.8s ease-out;

	.item {
		position: relative;
		height: 75px;
		border-radius: 10px;
		width: 31.5%;
		display: flex;
		color: white;
		display: inline;
		padding-top: 5px;
		overflow: hidden;
		box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		align-content: space-around;

		&:active {
			transform: translateY(-3px);
			box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
		}

		.title {
			margin: 10px;
			font-size: 14px;
			font-weight: 500;
		}

		.bottom {
			display: flex;
			align-items: baseline;
			display: flex;
			margin: 10px 5px 3px;

			.number {
				font-size: 16px;
				font-size: 28px;
				margin-left: 6px;
				font-weight: bold;
			}

			.dan {
				padding-left: 3px;
				font-size: 12px;
			}
		}

		.ic-yiyuyue {
			font-size: 55px;
			color: white;
			position: absolute;
			transform: rotate(-15deg);
			right: -10px;
			bottom: -8px;
			opacity: 0.6;
		}

		.ic-jinxingzhong {
			font-size: 60px;
			color: white;
			position: absolute;
			transform: rotate(-20deg);
			right: -10px;
			bottom: -5px;
			opacity: 0.6;
		}

		.ic-yijieshu {
			font-size: 55px;
			color: white;
			position: absolute;
			transform: rotate(-15deg);
			right: -8px;
			bottom: -8px;
			opacity: 0.6;
		}
	}

	.color1 {
		background: linear-gradient(135deg, #22c4ff, #2196f3);
	}

	.color2 {
		background: linear-gradient(135deg, #9c6eff, #7c4dff);
	}

	.color3 {
		background: linear-gradient(135deg, #4481eb, #04befe);
	}
}
</style>